<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布流布局示例</title>
    <style>
front-end-one-day-module        .box-wrapper {
            column-count: 3; /* 根据屏幕宽度调整列数 */
            column-gap: 10px; /* 列之间的间隔 */
            width: 100%; /* 容器宽度 */
            padding: 10px; /* 容器内边距 */
            text-align: center;
            text-justify: flex;
        }
        
        .box-item {
            margin: 0 0 10px; /* 盒子之间的间隔 */
            background: #cddaef; /* 盒子背景色 */
            color: white; /* 文本颜色 */
            display: inline-block;
            width: 100%; /* 盒子宽度 */
            box-sizing: border-box; /* 边框计算在宽度内 */
            break-inside: avoid; /* 防止盒子在列之间断开 */
        }
        
        .box-item > div {
            padding: 20px; /* 内容内边距 */
            box-sizing: border-box; /* 边框计算在高度内 */
            height: 100%;
        }
        
        .loading {
            position: fixed;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 10px;
            border-radius: 5px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="box-wrapper"></div>

    <script>
        const INITIAL_NUMBER = 40;
        const boxWrapper = document.querySelector(".box-wrapper");

        function createFragment(num) {
            const fragment = document.createDocumentFragment();
            for (let i = 0; i < num; i++) {
                const div = document.createElement("div");
                const randomHeight = Math.random() * 400 + 100;
                div.style.height = `${randomHeight}px`;
                div.classList.add("box-item");
                div.textContent = `内容 ${i + 1}`; // 为盒子添加一些文本内容
                fragment.appendChild(div);
            }
            return fragment;
        }

        function init() {
            boxWrapper.appendChild(createFragment(INITIAL_NUMBER));
        }

        function scrollHandler() {
            const { scrollTop, clientHeight } = document.documentElement;
            const nearBottom = scrollTop + clientHeight >= document.documentElement.scrollHeight * 0.9;

            if (nearBottom) {
                const num = Math.floor(Math.random() * 20) + 1; // 随机生成1到20个盒子
                boxWrapper.appendChild(createFragment(num));
            }
        }

        function debounce(callback, delay) {
            let timer = null;
            return function () {
                clearTimeout(timer);
                timer = setTimeout(callback, delay);
            };
        }

        window.addEventListener("load", init);
        window.addEventListener("scroll", debounce(scrollHandler, 200));
    </script>
</body>
</html>